<template>
  <div class="list-container">
    <!-- 线上发放详情 -->
    <el-form class="search-panel" v-model="searchForm" :inline="true">
      <el-form-item label="输入搜索：" prop="name">
        <el-input
          v-model="searchForm.name"
          placeholder="劳务公司/班组/班组长名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="出勤时间：">
        <el-date-picker
          v-model="searchForm.date"
          type="month"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-breadcrumb>
          <el-breadcrumb-item>劳务公司1</el-breadcrumb-item>
          <el-breadcrumb-item>班组1</el-breadcrumb-item>
          <el-breadcrumb-item>苏珊</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-table ref="filterTable" :data="tableData" style="width: 100%">
        <el-table-column
          prop="id"
          type="index"
          label="序号"
          width="60"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="date" label="出勤日期" align="center">
        </el-table-column>
        <el-table-column prop="time" label="出勤时间" align="center">
        </el-table-column>
        <el-table-column prop="count" label="合计" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.count }}小时</div>
          </template>
        </el-table-column>
        <el-table-column prop="referenceSalary" label="参考工资" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.referenceSalary }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="referenceLivingExpenses"
          label="参考生活费"
          align="center"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.referenceLivingExpenses }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="realWages" label="实际工资" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.realWages }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="realLivingExpenses"
          label="实际生活费"
          align="center"
        >
          <template slot-scope="scope">
            <div>¥{{ scope.row.realLivingExpenses }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="奖金" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.bonus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="fine" label="罚款" align="center">
          <template slot-scope="scope">
            <div>¥{{ scope.row.fine }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="checkedRow(scope.row)"
              type="text"
              icon="el-icon-search"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(total / searchForm.pageSize) }}页/{{ total }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="searchForm.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </div>
    <!-- 发放详情 -->
    <el-dialog title="发放详情" :visible.sync="dialogFormVisible" class="small-dialog"
      width="600px">
      <el-form :model="issueForm" disabled inline label-width="110px">
        <el-form-item label="发放状态：" required>
          <el-input v-model="issueForm.status"></el-input>
        </el-form-item>
        <el-form-item label="发放时间：" required>
          <el-input v-model="issueForm.time"></el-input>
        </el-form-item>
        <el-form-item label="发放人：" required>
          <el-input v-model="issueForm.issuer"></el-input>
        </el-form-item>
        <el-form-item label="发放工资：" required>
          <el-input v-model="issueForm.wage"></el-input>
        </el-form-item>
        <el-form-item label="生活费工资：" required>
          <el-input v-model="issueForm.livingExpenses"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="confirmForm" disabled inline label-width="110px">
        <el-form-item label="确认状态：" required>
          <el-input v-model="confirmForm.status"></el-input>
        </el-form-item>
        <el-form-item label="确认时间：" required>
          <el-input v-model="confirmForm.time"></el-input>
        </el-form-item>
        <el-form-item label="附件：" required>
          <el-input v-model="confirmForm.appendix"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        currentPage: 1,
        pageSize: 10,
        name: null,
        date: null,
      },
      total: 0,
      tableData: [{ date: "2020/01/20" }],
      dialogFormVisible:false,
      issueForm:{
          status:1,
          time:'2020-07-01',
          issuer:'张三',
          wage:100,
          livingExpenses:100,
      },
      confirmForm:{
          status:0,
          time:'2020-07-01',
          appendix:'附件',
      },
    };
  },
  methods: {
    onSubmit() {},
    checkedRow() {
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
    },
  },
};
</script>